<template>
  <view class="personal-container">
    <view class="top-bg"></view>
    <view class="card-box">
      <!-- 用户基本信息 -->
      <view class="userinfo">
        <view class="avatar-box">
          <image src="@/static/images/delete/avatar.jpg"></image>
        </view>
        <view class="info-box">
          <view class="phone">
            <button v-if="true" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumberCallback">绑定手机号</button>
            <text>{{ false ? 18984316111 : '绑定手机号' }}</text>
          </view>
          <view class="uuid">
            UID：1146
          </view>
        </view>
      </view>
      <!-- 金额卡片 -->
      <view class="money-card">
        <view class="money-box">
          <text>佣金返现：</text>
          <text>￥9999.99</text>
        </view>
        
        <view class="money-box">
          <text>限时推广佣金：</text>
          <text>99.99%</text>
        </view>
      </view>
      <!-- 菜单列表 -->
      <view class="menu-box">
        <uni-list>
          <uni-list-item clickable showExtraIcon showArrow link="navigateTo" to="/pages/recharge/recharge">
            <template v-slot:header>
              <view class="slot-box">
                <text class="iconfont">&#xe612;</text>
                <text class="text">余额</text>
                <text class="money">￥199.99</text>
              </view>
            </template>
          </uni-list-item>
          
          <uni-list-item clickable showExtraIcon showArrow>
            <template v-slot:header>
              <view class="slot-box">
                <text class="iconfont">&#xe652;</text>
                <text class="text">地址管理</text>
              </view>
            </template>
          </uni-list-item>
          
          <uni-list-item clickable showExtraIcon showArrow @click="onShowModal">
            <template v-slot:header>
              <view class="slot-box" >
                <text class="iconfont">&#xe65f;</text>
                <text class="text">推广海报</text>
              </view>
            </template>
          </uni-list-item>
          
          <uni-list-item clickable showExtraIcon showArrow>
            <template v-slot:header>
              <view class="slot-box">
                <text class="iconfont">&#xe65a;</text>
                <text class="text">佣金返现</text>
              </view>
            </template>
          </uni-list-item>
        </uni-list>
      </view>
    </view>
    
    <!-- 海报 -->
    <uni-popup ref="popup" >
      <view class="popup-content">
        <view class="image-box">
          <image show-menu-by-longpress src="../../static/images/delete/hb.jpg"></image>
        </view>
        <text class="text">长按图片保存</text>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: "Personal",
  setup(props, ctx) {
    const popup = ref();
    
    const onGetPhoneNumberCallback = (ev) => {
      console.log("使用该凭证获取手机号", ev.detail);
    }
    
    const onShowModal = () => {
      popup.value && popup.value.open('center');
    }
    
    return {
      onGetPhoneNumberCallback,
      onShowModal,
      popup
    }
  }
});

</script>

<style lang="scss" scoped>
@import '@/static/styles/variables.scss';
  
.top-bg {
  height: 340rpx;
  background-color: #EF816F;
}

.card-box {
  margin-top: -100rpx;
  background-color: #fff;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  padding: 30rpx 30rpx;
  
  .userinfo {
    $h: 160rpx;
    height: $h;
    margin-top: -($h * 0.6666);
    display: flex;
    align-items: center;
    
    .avatar-box {
      width: $h;
      height: $h;
      border-radius: 50%;
      overflow: hidden;
      
      > image {
        width: 100%;
        height: 100%;
      }
    }
    
    .info-box {
      margin-left: 40rpx;
      margin-top: 0rpx;
      > view {
        margin-bottom: 16rpx;
        font-size: 36rpx;
        color: #fff;
        font-weight: bold;
        &.uuid {
          color: #8A8A8A;
        }
        
        &.phone {
          position: relative;
          button {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            opacity: 0;
          }
        }
      }
    }
  }

  .money-card {
    height: 140rpx;
    background-color: #343447;
    border-radius: 18rpx;
    margin-top: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:0 30rpx;
    
    .money-box {
      color: #F8DCAC;
      
      > text {
        
        &:first-child {
          font-size: 24rpx;
        }
        
        &:last-child {
          font-size: 36rpx;
          font-weight: bold;
        }
      }
    }
  }
  
  .menu-box {
    margin-top: 40rpx;
    
    .slot-box {
      display: flex;
      align-items: center;
      
      .iconfont {
        font-size: 48rpx;
      }
      
      .text {
        margin: 0 10rpx;
      }
      
      .money {
        font-weight: bold;
        color: $primaryColor;
      }
    }
  }
}

.popup-content {
  text-align: center;
  
  .image-box {
    width: 600rpx;
    height: 1000rpx;
    margin-bottom: 40rpx;
    
    image {
      width: 100%;
      height: 100%;
    }
  }
  
  .text {
    color: #fff;
  }
}
</style>